<template>
  <div>
    <!--条件筛选-->
    <TopFilter :list="topFilterList" :cols="3" labelWidth="110" :collapse="boolean" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!--操作 -->
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <!-- 列筛选-->
    <FilterTable
      ref="table"
      columnsRef="lhmCustomerChurn"
      :columns="columns"
      :dataSource="tableDataList"
      :isMemoryPagination="true"
      :isExportExcel="true"
      :pageSize="20"
      exportFileName="流失客户.xls"
      :isSelectColumn="isSelectColumn"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChangeHandle"
      :onSyncTableData="tableHandle"
    >
      <template slot="controls">
        <el-button type="primary" @click="BtnClick">汇总</el-button>
        <!-- <el-button type="primary" @click="historyFun">维修历史</el-button> -->
      </template>
    </FilterTable>
    <BasePrint ref="print" :data="printList" template="businessOrder" />
    <!-- 维修历史 -->
    <Drawer :visible.sync="showRepairhistory" title="维修历史" width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Repairhistory ref="Repairhistory" :getdata="onSelectCell" @close="closeRepairhistory" />
    </Drawer>
    <Drawer :visible.sync="visible" title="汇总" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Collect :rowData="formData" @close="closeCollect" />
    </Drawer>
  </div>
</template>

<script>
/**
 * 查询流失客户 流失客户
 */
import { dictionary } from '@/utils/dictMixin';
import dictCode from '@/utils/dictCode';
import { authority } from '@/utils/authMixin';
import { isFormEmpty } from '@/utils';
import { confirmAction, notifyAction } from '@/utils';
import moment from 'moment';
import Collect from './Collect';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import { getCustormer } from '@/api/repair/queryStatistics/queryAccounts';
import { getList } from '@/api/repair/queryStatistics/queryLoseCustomer/customerChurn';
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import Repairhistory from './historypop.vue';
import { getWxlxSelect } from '@/api/repair/repairReception/customer';
export default {
  name: 'LHMCustomerChurn',
  components: {
    Repairhistory,
    Collect
  },
  mixins: [dictionary, authority],
  data() {
    this.conf = { add: '新增', delete: '删除', edit: '编辑', show: '显示' };
    this.formData = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      visible: false,
      visible1: false,
      boolean: false,
      isSelectColumn: false,
      printList: [],
      dialogTitle: '',
      fetchApi: getList,
      columns: this.createTableCheckColumns(),
      showRepairhistory: false, // 维修历史
      onSelectCell: {}, // 维修历史接收数据
      handleType: '',
      formData: {},
      tableData: [],
      tableDataList: [],
      lastYear: '',
      lastYearEnd: '',
      loseYear: '',
      loseYearEnd: '',
      ids: []
    };
  },
  created() {
    this.init();
  },
  mounted() {
    // 分页
    this.getWxlxSelect();
    this.init();
    this.BaseTable = this.$refs.table.$refs.pageTable;

    // this.getEmp();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '上次进厂日期',
          fieldName: 'beginDate1|endDate1',
          placeholder: '选择日期'
        },
        {
          type: 'RANGE_DATE',
          label: '流失日期',
          fieldName: 'beginDate|endDate',
          placeholder: '选择日期'
        }
      ];
    },
    createTableCheckColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },

        {
          title: '首次进厂日期',
          dataIndex: 'FIRST_IN_DATE',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          showOverflowTooltip: true,
          filterType: 'date-range'
        },
        {
          title: '上次进厂日期',
          dataIndex: 'LAST_MAINTAIN_DATE',
          showOverflowTooltip: true,
          width: 150,
          filter: true,
          dateFormat: 'yyyy-MM-dd',
          filterType: 'date-range'
        },
        {
          title: '客户代码',
          dataIndex: 'OWNER_NO',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'OWNER_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '证件号码',
          dataIndex: 'CT_CODE',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input',
          filterItems: this.createDictList('8013'),
          dictItems: this.createDictList('8013'),
          render: props => {
            return <span>{this.createDictText(props.row.ENGINE_NO, '8013')}</span>;
          }
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '底盘号',
          dataIndex: 'VIN',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input',
          width: 150
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '行驶里程',
          dataIndex: 'LAST_MAINTAIN_MILEAGE',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'LICENSE',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人姓名',
          dataIndex: 'CONTACTOR_NAME',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '联系人电话',
          dataIndex: 'CONTACTOR_MOBILE',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },

        {
          title: '送修人姓名',
          dataIndex: 'DELIVERER',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '送修人电话',
          dataIndex: 'DELIVERER_MOBILE',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '车系',
          dataIndex: 'SERIES_NAME',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '本公司售车',
          dataIndex: 'IS_SELF_COMPANY',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '销售单编号',
          dataIndex: 'SALES_NO',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '分期付款标识',
          dataIndex: 'INSTALL_INDENT',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '建档日期',
          dataIndex: 'CREATED_AT',
          width: 150,
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          dateFormat: 'yyyy-MM-dd',
          filterType: 'date-range'
        },
        {
          title: '客户地址',
          dataIndex: 'ADDRESS',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '邮编',
          dataIndex: 'ZIP_CODE',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '上次保养日期',
          dataIndex: 'LAST_MAINTENANCE_DATE',
          showOverflowTooltip: true,
          sorter: true,
          sorter: true,
          filter: true,
          dateFormat: 'yyyy-MM-dd',
          showOverflowTooltip: true,
          filterType: 'date-range'
        },
        {
          title: '售车单位',
          dataIndex: 'SALES_AGENT_NAME',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '日平均行驶里程',
          dataIndex: 'DAILY_AVERAGE_MILEAGE',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '省',
          dataIndex: 'PROVINCE_NAME',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '市',
          dataIndex: 'CITY_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '县',
          dataIndex: 'DISTRICT_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '购车日期',
          dataIndex: 'SALES_DATE',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          showOverflowTooltip: true,
          filterType: 'date-range'
        },
        {
          title: '首保日期',
          dataIndex: 'FIRST_MAINTAIN_DATE',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'date-range'
        },
        {
          title: '最后接待服务顾问',
          dataIndex: 'LAST_CONSULTANT_ID',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editItems: []
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_CODE',
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: [],
          filter: true,
          filterType: 'checkbox',
          filterItems: []
        }
      ];
    },
    closeCollect() {
      this.visible = false;
    },
    // 获取全部员工
    async init() {
      // 初始化 上次进厂日期：开始：去年的一月一日 结束：截止日期是去年的当前月最后一天
      //       流失日期     开始：进场日期+1天  结束：当前时间
      this.lastYear = moment()
        .subtract(1, 'year')
        .format('YYYY-01-01 HH:mm:ss');
      this.lastYearEnd = moment()
        .subtract(1, 'year')
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss');

      this.loseYear = moment(this.lastYearEnd)
        .add(1, 'days')
        .format('YYYY-MM-DD HH:mm:ss');
      this.loseYearEnd = moment().format('YYYY-MM-DD HH:mm:ss');
      console.log('冬至君王释放我孤身归故地', this.lastYear, '随弦断复了归乡心', this.lastYearEnd, '我为君王抚琴时转头看见你', this.loseYear);
      this.topFilterList.find(x => x.fieldName === 'beginDate1|endDate1').initialValue = [this.lastYear, this.lastYearEnd];
      this.topFilterList.find(x => x.fieldName === 'beginDate|endDate').initialValue = [this.loseYear, this.loseYearEnd];
      this.formData = {
        beginDate1: this.lastYear,
        endDate1: this.lastYearEnd,
        beginDate: this.loseYear,
        endDate: this.loseYearEnd
      };

      let obj = { role: dictCode.SERVICE_CONSULTANT };
      const res = await searchRoleByCode(obj);
      const filterData = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      console.log('filterData:', filterData);
      this.columns.find(x => x.dataIndex === 'LAST_CONSULTANT_ID').filterItems = this.columns.find(x => x.dataIndex === 'LAST_CONSULTANT_ID').editItems = filterData;
    },
    BtnClick() {
      this.visible = true;
    },
    // 维修历史
    historyFun() {
      console.log(this.selectedRow);
      if (this.selectedRow) {
        this.onSelectCell = {
          VIN: this.selectColumns[0].VIN
        };
        this.showRepairhistory = true;
      } else {
        notifyAction('请选择需要打印的派工单', 'warning');
      }
    },
    closeRepairhistory() {
      this.showRepairhistory = false;
    },
    async getWxlxSelect() {
      const res = await getWxlxSelect();
      try {
        this.columns.find(item => item.dataIndex === 'REPAIR_TYPE_CODE').editItems = res.data.map(x => ({
          value: x.REPAIR_TYPE_CODE,
          text: x.REPAIR_TYPE_NAME
        }));
        this.columns.find(item => item.dataIndex === 'REPAIR_TYPE_CODE').filterItems = res.data.map(x => ({
          value: x.REPAIR_TYPE_CODE,
          text: x.REPAIR_TYPE_NAME
        }));
      } catch (err) {
        console.log(err);
      }
    },
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'ZHFWGW').editItems = empList;
    },
    tableHandle(val) {
      // 组件的数据列表
      this.tableData = val;
    },
    selectChangeHandle(val) {
      this.selectedRow = val;
      console.log(this.selectedRow);
    },
    async changeHandle(val) {
      this.$refs.table.START_LOADING();
      let YearChange = moment(val.endDate1)
        .add(1, 'days')
        .format('YYYY-MM-DD HH:mm:ss');
      console.log('change=>date', val.beginDate, YearChange);
      if (isFormEmpty(val.beginDate1) || isFormEmpty(val.endDate1) || isFormEmpty(val.beginDate) || isFormEmpty(val.endDate)) {
        notifyAction('请选择时间', 'warning');
      } else {
        if (val.beginDate == YearChange) {
          this.fetchParams = Object.assign({}, val);
          this.formData = this.fetchParams; // EP-25570
          const res = await getCustormer(this.formData);
          this.tableDataList = res.data;
          console.log('this.formData', this.formData);
          // this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
        } else {
          notifyAction('流失日期开始时间必须等于上次进厂日期结束+1天', 'warning');
          // val = [...val];
        }
      }
      this.$refs.table.STOP_LOADING();
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    saveHandle() {
      console.log('这是保存查询结果');
      // this.$refs.print.EXCUTE_PRINT();
    }
  }
};
</script>
<style lang="less" scoped></style>
